<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI数学助教 - MVP原型</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="device-frame">
        <div class="screen-container">
            <!-- 顶部状态栏 -->
            <div class="status-bar">
                <div class="time" id="currentTime"></div>
                <div class="battery">🔋 85%</div>
            </div>

            <!-- 主题目区域 -->
            <div class="question-area">
                <div class="question-header">
                    <h3>小学数学练习</h3>
                    <div class="progress-indicator">
                        <span id="currentQuestion">1</span> / <span id="totalQuestions">8</span>
                    </div>
                </div>
                <div class="question-content" id="questionContent">
                    <!-- 题目内容将在这里动态加载 -->
                </div>
            </div>

            <!-- 手写输入区域 -->
            <div class="writing-area">
                <canvas id="writingCanvas"></canvas>
                <div class="canvas-tools">
                    <button id="clearBtn">清除</button>
                    <button id="undoBtn">撤销</button>
                </div>
                
                <!-- 浮动的题目切换按钮 -->
                <div class="floating-nav-buttons">
                    <button id="floatingPrevBtn" class="floating-nav-btn prev" title="上一题 (左箭头键)">
                        ⬅️
                    </button>
                    <button id="floatingNextBtn" class="floating-nav-btn next" title="下一题 (右箭头键)">
                        ➡️
                    </button>
                </div>
            </div>

            <!-- AI助手区域 -->
            <div class="ai-assistant" id="aiAssistant">
                <div class="assistant-avatar" title="点击收缩/展开助教">🤖</div>
                <div class="assistant-content">
                    <div class="assistant-message" id="assistantMessage">
                        我是你的数学助教，遇到困难随时可以问我哦！
                    </div>
                    <div class="help-level-indicator" id="helpLevel">
                        <!-- 帮助级别指示器 -->
                    </div>
                    <div class="chat-input-area" id="chatInputArea" style="display: none;">
                        <input type="text" id="chatInput" placeholder="有什么问题想问我吗？" maxlength="100">
                        <button id="sendChatBtn" onclick="window.mathTutor?.sendChatMessage()">发送</button>
                        <button id="closeChatBtn" onclick="window.mathTutor?.closeChatInput()">×</button>
                    </div>
                </div>
                <button class="chat-toggle-btn" id="chatToggleBtn" onclick="window.mathTutor?.toggleChatInput()">💬</button>
            </div>

            <!-- 底部工具栏 -->
            <div class="toolbar">
                <button id="configBtn" class="toolbar-btn config-btn" onclick="window.mathTutor?.showAPIConfigDialog()">
                    <span class="btn-icon">⚙️</span>
                    <span class="btn-text">配置</span>
                </button>
                <button id="submitBtn" class="toolbar-btn submit-btn">
                    <span class="btn-icon">✅</span>
                    <span class="btn-text">提交答案</span>
                </button>
            </div>

            <!-- 学习状态监控面板 -->
            <div class="debug-panel" id="debugPanel">
                <h4 title="点击收缩/展开监控中心">🔍 智能监控中心</h4>
                <div id="debugInfo" class="monitoring-content">
                    <!-- 监控信息将通过JavaScript动态更新 -->
                    <strong>📊 学习状态监控</strong><br>
                    当前阶段: 准备中<br>
                    当前状态: <span id="currentStatus">准备中</span><br>
                    停顿时间: 0秒<br>
                    书写时间: 0秒<br>
                    涂改次数: 0次<br>
                    帮助级别: 0/5<br>
                    笔画数量: 0<br>
                    <br>
                    <strong>🔍 实时监控状态</strong><br>
                    监控状态: 🔴 未启动<br>
                    最后分析: 未分析<br>
                    连续错误: 0次<br>
                    分析历史: 0条<br>
                    正在分析: 否
                </div>
                
                <div class="monitoring-controls">
                    <button onclick="window.mathTutor?.startRealtimeMonitoring()" class="monitor-btn start-btn">
                        🟢 启动监控
                    </button>
                    <button onclick="window.mathTutor?.stopRealtimeMonitoring()" class="monitor-btn stop-btn">
                        🔴 停止监控
                    </button>
                    <button onclick="window.mathTutor?.restartRealtimeMonitoring()" class="monitor-btn restart-btn">
                        🔄 重启监控
                    </button>
                </div>
                
                <div class="monitoring-status">
                    <div class="status-indicator" id="monitoringStatusIndicator">
                        <span class="status-dot offline"></span>
                        <span class="status-text">监控离线</span>
                    </div>
                </div>
            </div>

            <!-- 功能演示面板 -->
            <div class="demo-panel" id="demoPanel">
                <h4>📋 功能演示指南
                    <button class="demo-panel-close" onclick="closeDemoPanel()">×</button>
                </h4>
                <div class="demo-panel-content">
                    <div class="demo-item">
                        <button onclick="window.mathTutor.demoStuckDetection()">🎯 演示卡顿检测</button>
                    </div>
                    <div class="demo-item">
                        <button onclick="window.mathTutor.requestHelp()">💡 演示渐进式帮助</button>
                    </div>
                    <div class="demo-item">
                        <button onclick="window.mathTutor.demoWritingAnalysis()">✍️ 演示书写分析</button>
                    </div>
                    <div class="demo-item">
                        <button onclick="window.mathTutor.showAPIConfigDialog()">⚙️ 配置AI模型</button>
                    </div>
                    <div class="demo-item">
                        <button onclick="window.mathTutor.startRealtimeMonitoring()">🟢 启动实时监控</button>
                    </div>
                    <div class="demo-item">
                        <button onclick="window.mathTutor.recognizeHandwriting()">🔍 测试手写识别</button>
                    </div>
                    <div class="demo-item">
                        <button onclick="window.mathTutor.toggleChatInput()">💬 AI对话助手</button>
                    </div>
                    <div class="demo-item">
                        <button onclick="diagnoseMonitoring()">🔧 系统诊断</button>
                    </div>
                    
                    <div class="demo-instructions">
                        <p><strong>✨ 最新智能体验</strong></p>
                        <p>本系统采用先进AI技术，提供全方位智能教学体验，包括实时监控、手写识别、语音对话和智能检查等功能。</p>
                        
                        <p><strong>🔍 实时监控系统</strong></p>
                        <p>• 5秒间隔实时监控学习状态和书写行为</p>
                        <p>• AI智能识别学习困难和卡顿情况（5秒停顿触发）</p>
                        <p>• 自动触发个性化教学干预和帮助</p>
                        <p>• 答案正确时自动停止监控，避免过度干扰</p>
                        <p>• 支持多维度学习数据分析</p>
                        
                        <p><strong>🤖 AI视觉识别</strong></p>
                        <p>• 支持豆包、GPT-4V、通义千问等主流AI模型</p>
                        <p>• 实时手写内容识别和数学公式理解</p>
                        <p>• 智能分析学习进度和知识点掌握情况</p>
                        <p>• 自动答案检查和正确性验证</p>
                        
                        <p><strong>🎨 界面交互优化</strong></p>
                        <p>• 监控中心和AI助教支持一键收缩/展开</p>
                        <p>• 默认收缩状态，保持界面简洁</p>
                        <p>• AI助教在提供帮助时自动展开</p>
                        <p>• 平滑动画效果，提升用户体验</p>
                        
                        <p><strong>🎯 智能介入机制</strong></p>
                        <p>• 基于书写行为智能判断最佳介入时机（5秒停顿检测）</p>
                        <p>• 五级渐进式教学，循序渐进引导思考</p>
                        <p>• 避免过度帮助，培养学生独立解题能力</p>
                        <p>• 答案正确时立即更新状态并提供知识扩展</p>
                        <p>• 个性化帮助策略，因材施教</p>
                        
                        <p><strong>💬 AI对话助手</strong></p>
                        <p>• 自然语言交互，支持语音和文字对话</p>
                        <p>• 实时答疑解惑，解答学习中的疑问</p>
                        <p>• 智能学习建议和个性化指导</p>
                        <p>• 学习情况总结和进步反馈</p>
                        
                        <p><strong>📚 完整使用流程</strong></p>
                        <p>1. 📖 <strong>初始配置</strong>：点击"⚙️ 配置AI模型"设置API密钥</p>
                        <p>2. 🚀 <strong>启动监控</strong>：点击"🟢 启动实时监控"开启智能监控</p>
                        <p>3. ✍️ <strong>开始答题</strong>：在画布上书写解题过程或输入答案</p>
                        <p>4. 🔍 <strong>AI分析</strong>：系统自动识别和分析你的书写内容</p>
                        <p>5. 💡 <strong>智能帮助</strong>：遇到困难时自动或手动获取帮助</p>
                        <p>6. 💬 <strong>对话交流</strong>：使用对话功能进行深入交流</p>
                        <p>7. ✅ <strong>答案检查</strong>：完成后点击"提交答案"获得AI反馈</p>
                        <p>8. 📈 <strong>学习总结</strong>：查看学习进度和改进建议</p>
                        
                        <p><strong>🔧 技术特色</strong></p>
                        <p>• <strong>多模态AI</strong>：文字、图像、语音全方位支持</p>
                        <p>• <strong>实时处理</strong>：毫秒级响应，流畅学习体验</p>
                        <p>• <strong>云端计算</strong>：强大算力支持复杂推理</p>
                        <p>• <strong>隐私保护</strong>：本地处理敏感数据</p>
                        
                        <p><strong>🎮 操作说明</strong></p>
                        <p>• ⬅️➡️ 左右箭头键：切换题目</p>
                        <p>• Enter键：发送对话消息</p>
                        <p>• 点击"🔍 智能监控中心"标题：收缩/展开监控面板</p>
                        <p>• 点击🤖头像：收缩/展开AI助教</p>
                        <p>• 💡按钮：主动请求帮助（最多5级）</p>
                        
                        <p><strong>🌟 系统优势</strong></p>
                        <p>相比传统教学方式，本系统能够提供个性化、实时化、智能化的学习体验，帮助学生更高效地掌握数学知识，培养逻辑思维能力。</p>
                    </div>
                </div>
            </div>

            <!-- 打开演示面板的按钮 -->
            <button class="demo-toggle-btn" id="demoToggleBtn" onclick="toggleDemoPanel()">
                📋 <span id="demoToggleText">关闭演示指南</span>
            </button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html> 